<div class="row-fluid">
	<div class="span6">
		<ul class="pagination" data-th-if="${pi.pages gt 1 and pi.pages le 7}">
			<li class="page-item" data-th-classappend="${pi.isFirstPage} ? 'disabled' : ''">
				<a href="javascript:void(0);" th:onclick="'pagechange(\''+${pi.pageNum - 1}+'\')'"
					class="page-link" data-th-attr="pageIndex=${pi.pageNum} - 1" aria-label="Previous">
					<span aria-hidden="true">«</span>
				</a>
			</li>
			
			<li class="page-item" data-th-each="i : ${#numbers.sequence(1, pi.pages)}" 
				data-th-classappend="${pi.pageNum eq i} ? 'active' : ''" >
				<a class="page-link" data-th-attr="pageIndex=${i} - 1" href="javascript:void(0);" th:onclick="'pagechange(\''+${i}+'\')'">
					<span data-th-text="${i}"></span>
				</a>
			</li>
			
			<li class="page-item" data-th-classappend="${pi.isLastPage} ? 'disabled' : ''">
				<a href="javascript:void(0);" class="page-link" data-th-attr="pageIndex=${pi.pageNum} + 1" aria-label="Next"
					th:onclick="'pagechange(\''+${pi.pageNum + 1}+'\')'">
					<span aria-hidden="true">»</span>
				</a>
			</li>
		</ul>
		
		<!-- 处理页数大于7 的情况 -->	
		<ul class="pagination" data-th-if="${pi.pages gt 7}" >
		 	<!-- 上一页 -->
			<li class="page-item" data-th-classappend="${pi.isFirstPage} ? 'disabled' : ''">
				<a href="javascript:void(0);" class="page-link" data-th-attr="pageIndex=${pi.pageNum} - 1" 
					aria-label="Previous" th:onclick="'pagechange(\''+${pi.pageNum - 1}+'\')'">
					<span aria-hidden="true">«</span>
				</a>
			</li>
			
				<!-- 首页 -->
			<li class="page-item" data-th-classappend="${(pi.pageNum) eq 1} ? 'active' : ''" >
				<a href="javascript:void(0);" class="page-link" data-th-attr="pageIndex=0"
					th:onclick="'pagechange(\'1\')'">1</a>
			</li>
			 
			
		 	<!-- 当前页面小于等于4 -->
		 	<li class="page-item" data-th-if="${(pi.pageNum) le 4}" data-th-each="i : ${#numbers.sequence(2,5)}" 
				data-th-classappend="${(pi.pageNum) eq i} ? 'active' : ''" >
				<a class="page-link" href="javascript:void(0);" data-th-attr="pageIndex=${i} - 1" th:onclick="'pagechange(\''+${i}+'\')'">
					<span data-th-text="${i}"></span>
				</a>
			</li>
		
			<li class="page-item disabled" data-th-if="${(pi.pageNum) le 4}">
				<a href="javascript:void(0);" class="page-link">
					<span aria-hidden="true">...</span>
				</a>
			</li>
			
			<!-- 最后一页与当前页面之差，小于等于3 -->
			<li class="page-item disabled" data-th-if="${(pi.pages-(pi.pageNum)) le 3}">
				<a href="javascript:void(0);" class="page-link">
					<span aria-hidden="true">...</span>
				</a>
			</li>  
		 	<li class="page-item" data-th-if="${(pi.pages-(pi.pageNum)) le 3}" data-th-each="i : ${#numbers.sequence(pi.pages-4, pi.pages-1)}" 
				data-th-classappend="${(pi.pageNum) eq i} ? 'active' : ''" >
				<a class="page-link" href="javascript:void(0);" data-th-attr="pageIndex=${i} - 1" th:onclick="'pagechange(\''+${i}+'\')'">
					<span data-th-text="${i}"></span>
				</a>
			</li>
		 
			 <!-- 最后一页与当前页面之差大于3，且  当前页面大于4-->
			 
			<li class="page-item disabled" data-th-if="${((pi.pageNum) gt 4) and ((pi.pages-(pi.pageNum)) gt 3 )}">
				<a href="javascript:void(0);" class="page-link">
					<span aria-hidden="true">...</span>
				</a>
			</li> 
			<li class="page-item" data-th-if="${(pi.pageNum gt 4) and ((pi.pages-pi.pageNum) gt 3 )}" >
				<a href="javascript:void(0);" class="page-link" data-th-attr="pageIndex=${pi.pageNum}"
					th:onclick="'pagechange(\''+${pi.pageNum}+'\')'">[[${pi.pageNum}]]</a>
			</li>
			<li class="page-item active" data-th-if="${(pi.pageNum gt 4) and ((pi.pages-pi.pageNum) gt 3 )}">
				<a href="javascript:void(0);" class="page-link" data-th-attr="pageIndex=${pi.pageNum} + 1"
					th:onclick="'pagechange(\''+${pi.pageNum + 1}+'\')'">[[${pi.pageNum + 1}]]</a>
			</li>
			<li class="page-item" data-th-if="${(pi.pageNum gt 4) and ((pi.pages-pi.pageNum) gt 3 )}">
				<a href="javascript:void(0);" class="page-link" data-th-attr="pageIndex=${pi.pageNum} + 2"
					th:onclick="'pagechange(\''+${pi.pageNum + 2}+'\')'">[[${pi.pageNum + 2}]]</a>
			</li>
			
			<li class="page-item disabled"  data-th-if="${(pi.pageNum gt 4) and ((pi.pages-pi.pageNum) gt 3 )}">
				<a href="javascript:void(0);" class="page-link">
					<span aria-hidden="true">...</span>
				</a>
			</li>
		
			<!-- 最后一页 -->
			<li class="page-item" data-th-classappend="${(pi.pageNum) eq pi.pages} ? 'active' : ''" >
				<a href="javascript:void(0);" class="page-link" data-th-attr="pageIndex=${pi.pages} - 1" data-th-text="${pi.pages}"
					th:onclick="'pagechange(\''+${pi.pages}+'\')'"></a>
			</li>
		
				<!-- 下一页 -->
				<li class="page-item" data-th-classappend="${pi.isLastPage} ? 'disabled' : ''">
				<a href="javascript:void(0);" class="page-link" data-th-attr="pageIndex=${pi.pageNum} + 1" aria-label="Next"
					th:onclick="'pagechange(\''+${pi.pageNum + 1}+'\')'">
					<span aria-hidden="true">»</span>
				</a>
			</li>
		</ul>
	</div>
	<div class="span6">
		<div class='page_select' data-th-if="${pi.pages gt 1}">每页
			<select id="pageSize" name='pageSize' th:onchange="'pagechange(1);'">
				<option value='5' th:selected="${pi.pageSize} == 5">5</option>
				<option value='10' th:selected="${pi.pageSize} == 10">10</option>
				<option value='20' th:selected="${pi.pageSize} == 20">20</option>
				<option value='30' th:selected="${pi.pageSize} == 30">30</option>
				<option value='40' th:selected="${pi.pageSize} == 40">40</option>
			</select>条&nbsp;共<span th:text="${pi.total}"></span>条&nbsp;页码:
			<select id="pageIndex" name="pageIndex" th:onchange="'pagechange(this.value);'" th:field="*{pageIndex}">
				<option th:each="page : ${#numbers.sequence(1, pi.pages)}" th:value="${page}" th:text="${page}">1</option>
			</select>/<span th:text="${pi.pages}">10</span>
		</div>
	</div>
</div>